<template>
 <div>
     <div class="box-card">
         <el-row class="container">
             <el-col class="result c-container clearfix mostPopular" :lg="{ span: 20, offset: 2}" :md="{span: 22}" data-scroll-reveal>
                 <Row class="setHeight">
                     <Col class="article-time" :xs="4" :sm="4" :md="4" :lg="4">
                     <span>
                          <span v-if="result[0]!==undefined">{{result[0].year}}</span>
                          <span v-if="result[0]!==undefined">{{result[0].month}}</span>
                          <span v-if="result[0]!==undefined">{{result[0].day}}</span>
                     </span>

                     </Col>
                     <Col  class="content-article" :xs="17" :sm="17" :md="17" :lg="17">
                     <span class="title" v-if="result[0]!==undefined">{{result[0].title}}</span>
                       <div>
                           <span class="letterSpacing" v-html='result[0].abstr' v-if="result[0]!==undefined"></span>
                       </div>
                     <div class="search">
                         <Button class="see-content" @click="renferArticle(result[0])">查看详情>></Button>
                         <div class="see-view">
                             <span class="viewnum f_zt" v-if="result[0]!==undefined"><Icon type="eye" class="viewnum"></Icon>浏览（{{result[0].see}}）</span>
                             <span class="likel f_zt" v-if="result[0]!==undefined"><Icon type="happy-outline" class="likeli"></Icon>喜欢（ {{result[0].likes}} ）</span>
                         </div>
                     </div>
                     </Col>
                 </Row>
             </el-col>
         </el-row>
     </div>
     <div class="box-card">
         <el-row class="container">
             <el-col class="result c-container clearfix" :xs="24" :sm="24" :md="12" :lg="12" data-scroll-reveal v-if="index!==0" v-for="(item,index) in result" :key="index">
                 <Row class="setHeight">
                     <Col class="article-time" :xs="6" :sm="6" :md="6" :lg="6">
                   <div>
                       <img :src="item.imgUrl" alt="">
                   </div>
                     </Col>
                     <Col  class="content-article" :xs="16" :sm="16" :md="16" :lg="16">
                     <span class="title" @click="renferArticle(item)">{{item.title}}</span>
                     <div><span class="letterSpacing" v-html='item.abstr'></span></div>
                    <div class="search">
                        <button class="see-content" @click="renferArticle(item)">查看详情>></button>
                        <div class="see-view">
                            <span class="viewnum f_zt"><Icon type="eye" class="viewnum"></Icon>浏览（{{item.see==null?0:item.see}}）</span>
                            <span class="likel f_zt"><Icon type="happy-outline" class="likeli"></Icon>喜欢（ {{item.likes==null?0:item.likes}} ）</span>
                        </div>
                    </div>
                     </Col>
                 </Row>
             </el-col>
         </el-row>
     </div>
 </div>
</template>
<style scoped  src="../../../static/css/frontend/article/main.css">
       
</style>

<script>
    import scrollReveal from  'scrollreveal'
    import  '../../../static/js/public'
    export default {
        data () {
            return {
                scrollReveal:scrollReveal(),
                es:"333",
                row:{
                    page:1,
                    per_page:20
                },
                result:{},
                resultTop:{}
            }
        },
        mounted () {
            this.initArticles();

        },
        watch:{
            result:function () {
                let that = this;
                this.$nextTick(function () {   //或者用 this.$nextTick
                    that.init();
                })
            }
        },
        methods: {
            init: function () {
                var target = this;
                this.scrollReveal.reveal('.result',target.configScroll);
            },
            renferArticle(item){
                this.$router.push({path:'/article?id='+item.id});
            },
            initArticles(){
                var that = this;
                this.fetch({
                    url: '/getArticles',
                    method: 'GET',
                    params: {
                        type:1,
                        page: that.row.page,
                        per_page: that.row.per_page
                    }
                }).then(function (response) {
                    if(response.data.ret==1) {
                        that.result = response.data.rows;
                        if (that.result.length > 0) {
                            for (var i in  that.result) {
                                var data = new Date(that.result[i]['create_time'])
                                that.result[i]['create_time'] = data.toLocaleString('chinese', {hour12: false});
                                that.result[i]['year'] = that.result[i]['create_time'].split('/')[0];
                                that.result[i]['month'] = that.result[i]['create_time'].split('/')[1];
                                that.result[i]['day'] = that.result[i]['create_time'].split('/')[2].split(' ')[0];
                                that.result[i]['time'] = that.result[i]['create_time'].split('/')[2].split(' ')[1];
                            }
                        }
                        console.log(that.result);
                    }
                });
            }
    }
    }
</script>
